<template>
  <div class="app-container">
    <div class="toolbar">
      <el-button type="primary" @click="onCreated">创建课题</el-button>

      <el-date-picker v-model="selectedYear" class="date-picker" type="year" placeholder="选择年" />
    </div>
    <el-table border style="width: 100%" :data="theses">
      <el-table-column prop="title" label="课题名称">
        <!-- <template slot-scope="scope">
          <el-button type="text" @click="onViewDetails(scope.row.id)">{{ scope.row.title }}</el-button>
        </template>-->
      </el-table-column>

      <el-table-column prop="created" label="创建时间" width="230">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ new Date(scope.row.created).toLocaleString() }}</span>
        </template>
      </el-table-column>

      <el-table-column label="课程详情" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="onViewDetails(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="课题状态" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '0'" type="success">选定中</el-tag>
          <el-tag v-else type="danger">已选定</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="students" label="已报名学生" width="300">
        <template slot-scope="scope">
          <el-tooltip v-for="s in scope.row.students" :key="s.id" placement="top" effect="light">
            <div slot="content">
              <p>手机号:{{ s.phone }}</p>
              <p>QQ:{{ s.qq }}</p>
            </div>
            <!-- <StudentTag>也可 -->
            <student-tag
              :text="s.name"
              size="medium"
              type="success"
              :checkable="scope.row.status !='3'"
              @check="onStudentCheck(scope.row.id, s.id)"
            >{{ s.name }}</student-tag>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="分数" width="100" />

      <el-table-column prop="name" label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="onEdit(scope.row.id, scope.row.title, scope.row.created)"
          >编辑</el-button>
          <el-button
            v-if="!scope.row.students || scope.row.students.length <= 0"
            type="danger"
            size="small"
            @click="onDelete(scope.row.id)"
          >删除</el-button>
          <el-button type="primary" size="small" @click="onGrade(scope.row.id)">
            <i class="el-icon-edit" />
            分数
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="thesisTitle" :visible.sync="isDialogVisible">
      <div v-loading="contentLoading">{{ thesis.content || '' }}</div>
      <el-button slot="footer" type="primary" @click="isDialogVisible = false">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getTheses, getThesisById, deleteTheses, choseStudent } from '@/api/theses'
// import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import StudentTag from './components/StudentTag'
export default {
  // 注册组件
  components: {
    StudentTag
  },

  data() {
    return {
      selectedYear: '',
      theses: [],
      thesis: {},
      isDialogVisible: false,
      thesisTitle: '课程详情',
      contentLoading: false
    }
  },

  computed: {
    // uid(){
    //   return this.$store.state.user.uid
    // }
    // ...mapState {
    //   uid: (state) => state.user.uid
    // }
    ...mapGetters(['uid'])
  },

  // 侦听属性 (监听data属性变化，做异步处理)
  watch: {
    isDialogVisible(value) {
      if (value) {
        // 发送请求，获取课题详情
        getThesisById(this.thesisId).then(res => {
          this.thesis = res.data.data
          this.contentLoading = false
        })
      }
    }
  },

  created() {
    this.loadData()
  },

  methods: {
    onViewDetails(id) {
      this.thesisId = id
      // 弹出对话框，显示课题详情

      this.isDialogVisible = true
    },

    onEdit(id, title, created) {
      console.log('onEdit', id, title, created)

      this.$router.push({ path: 'editThesis', query: { id, title, created }})
    },

    onDelete(id) {
      console.log('onDelete', id)
      deleteTheses(id)
      history.go(0)
    },

    onGrade(id) {
      console.log('onGrade', id)
    },

    onStudentCheck(thesisId, studentId) {
      // console.log('checked...', uid, key)

      choseStudent(thesisId, studentId).then(res => {
        this.loadData()
      })
    },

    loadData() {
      getTheses(this.uid, 2020).then(res => {
        this.theses = res.data.data
      })
    },

    onCreated() {
      this.$router.push({ path: 'editThesis' })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.toolbar {
  margin-bottom: 10px;
}

.date-picker {
  float: right;
}
</style>
